
import React,{Fragment} from "react";
import {Descriptions, Modal} from "antd";
import FormatLink from "../formater/FormatLink";
import FormatPic from "../formater/FormatPic";
import FormatFile from "../formater/FormatFile";
import FormatRaw from "../formater/FormatRaw";

class ActionDetail extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            //图片预览弹窗
            previewVisible:false,
            //图片预览地址
            previewImage:""
        }
    }

    formatContent = (config,data) => {
        if (config["format"] === "text"){
            return data[config["field"]];
        }else if (config["format"] === "link"){
            return <FormatLink record={data[config["field"]]} title={data[config["field"]]}/>
        }else if (config["format"] === "pic"){
            return <FormatPic record={data[config["field"]]} size={64}/>
        } else if (config["format"] === "file"){
            return <FormatFile record={data[config["field"]]}/>
        }else if(config['format'] === "raw"){
            return <FormatRaw record={data[config["field"]]} />
        }else {
            return data[config["field"]];
        }
    };

    render() {
        const config = this.props.config;
        const data = this.props.data;
        return (
            <Fragment>
                <Descriptions bordered>
                    {
                        config.map((item,index) => {
                            return <Descriptions.Item key={index} label={item["label"]} span={24}>{this.formatContent(item,data)}</Descriptions.Item>
                        })
                    }
                </Descriptions>
                <Modal visible={this.state.previewVisible} footer={null} onCancel={() => {this.setState({previewVisible:false,previewImage:""})}}>
                    <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                </Modal>
            </Fragment>
        );
    }
}

export default ActionDetail;
